<template>
  <el-dialog
    v-model="visible"
    :title="title"
    :width="width"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleCancel"
  >
    <div class="confirm-content">
      <slot>
        <p>{{ content }}</p>
      </slot>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">{{ cancelText }}</el-button>
        <el-button 
          type="primary" 
          @click="handleConfirm"
          :loading="confirmLoading"
        >
          {{ confirmText }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ElDialog, ElButton } from 'element-plus'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '确认操作'
  },
  content: {
    type: String,
    default: '确定要执行此操作吗？'
  },
  confirmText: {
    type: String,
    default: '确定'
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  width: {
    type: String,
    default: '30%'
  },
  onConfirm: {
    type: Function,
    default: () => Promise.resolve()
  },
  onCancel: {
    type: Function,
    default: () => {}
  }
})

const emit = defineEmits(['update:modelValue', 'confirm', 'cancel'])

const visible = ref(false)
const confirmLoading = ref(false)

watch(
  () => props.modelValue,
  (val) => {
    visible.value = val
  }
)

const handleConfirm = async () => {
  confirmLoading.value = true
  try {
    await props.onConfirm()
    emit('confirm')
    close()
  } catch (error) {
    console.error('Confirm error:', error)
  } finally {
    confirmLoading.value = false
  }
}

const handleCancel = () => {
  emit('cancel')
  if (props.onCancel) {
    props.onCancel()
  }
  close()
}

const close = () => {
  visible.value = false
  emit('update:modelValue', false)
}
</script>

<style scoped>
.confirm-content {
  font-size: 14px;
  line-height: 1.5;
  color: #666;
}

.dialog-footer {
  text-align: right;
}
</style>